<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件数据注入</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <my-list :count="5"></my-list>
    </div>
  </body>

  <script>
    const App = Vue.createApp({})
    /*** 无provider inject的实现，变理需要一级一级传递 ***/
    /***
    const labelCom ={
        props:{
            listCount: Number,
            index: Number
        },
        template:`
            <div>{{index}}/{{this.listCount}}</div>
        `
    }
    const itemCom ={
        components:{
            "my-label":labelCom
        },
        props:{
            listCount: Number,
            index: Number
        },
        template:`
          <div style="border:blue solid 10px;"><my-label :list-count="this.listCount" :index="this.index"></my-label></div>
        `
    }
    const listCom ={
        components:{
            "my-item":itemCom
        },
        props:{
            count: Number
        },
        template:`
          <div style="border:red solid 10px">
            <my-item v-for="i in this.count" :list-count="this.count" :index=i ></my-item>
          </div>
        `
    }
    ****/

    /****  ***/
    const labelCom ={
      props:{
        index: Number
      },
      inject:['listCount'],
      template:`
          <div>{{index}}/{{this.listCount}}</div>
      `
    }
    const itemCom ={ 
      components:{
        "my-label":labelCom
      },
      props:{
        index: Number
      },
      template:`
        <div style="border:blue solid 10px;"><my-label :index="this.index"></my-label></div>
      `
    }
    const listCom ={
      components:{
        "my-item":itemCom
      },
      props:{
        count: Number
      },
      provide(){
        return {
          listCount : this.count
        }
      },
      template:`
        <div style="border:red solid 10px">
          <my-item v-for="i in this.count" :index=i ></my-item>
        </div>
      `
    }
    
    App.component("my-list", listCom)
    App.mount("#Application")
  </script>

</html>